<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 30px;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: 1px solid rgba(0, 0, 0, 0.125);
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>用户管理</h2>
        <button class="btn btn-outline-secondary" onclick="goHome()">返回主页</button>
    </div>

    <div class="card">
        <div class="card-header">
            <h5>用户列表</h5>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <button class="btn btn-primary" onclick="loadUsers()">刷新列表</button>
                <button class="btn btn-success" onclick="showAddUserForm()">添加用户</button>
            </div>

            <div id="userList">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑用户模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">添加用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <input type="hidden" id="userId">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="password">
                            <div class="form-text">编辑用户时留空表示不修改密码</div>
                        </div>
                        <div class="mb-3">
                            <label for="enabled" class="form-label">状态</label>
                            <select class="form-control" id="enabled">
                                <option value="true">启用</option>
                                <option value="false">禁用</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 页面加载时获取用户列表
    document.addEventListener('DOMContentLoaded', function() {
        loadUsers();
    });

    function goHome() {
        window.location.href = '/';
    }

    function loadUsers() {
        fetch('/api/users')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayUsers(data.data);
                } else {
                    showError('获取用户列表失败: ' + data.message);
                }
            })
            .catch(error => {
                showError('获取用户列表失败: ' + error.message);
            });
    }

    function displayUsers(users) {
        const userListDiv = document.getElementById('userList');

        if (!users || users.length === 0) {
            userListDiv.innerHTML = '<p class="text-muted text-center">暂无用户数据</p>';
            return;
        }

        let tableHtml = `
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
        `;

        users.forEach(user => {
            tableHtml += `
                <tr>
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.email || ''}</td>
                    <td>
                        <span class="badge ${user.enabled ? 'bg-success' : 'bg-danger'}">
                            ${user.enabled ? '启用' : '禁用'}
                        </span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-outline-primary" onclick="editUser(${user.id})">编辑</button>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteUser(${user.id})">删除</button>
                    </td>
                </tr>
            `;
        });

        tableHtml += `
                    </tbody>
                </table>
            </div>
        `;

        userListDiv.innerHTML = tableHtml;
    }

    function showAddUserForm() {
        document.getElementById('userModalLabel').textContent = '添加用户';
        document.getElementById('userForm').reset();
        document.getElementById('userId').value = '';
        document.getElementById('password').required = true;
        new bootstrap.Modal(document.getElementById('userModal')).show();
    }

    function editUser(userId) {
        // 这里应该从API获取用户详细信息，简化处理
        document.getElementById('userModalLabel').textContent = '编辑用户';
        document.getElementById('userId').value = userId;
        document.getElementById('password').required = false;
        new bootstrap.Modal(document.getElementById('userModal')).show();
    }

    function saveUser() {
        // 简化处理，实际应该调用API保存用户
        alert('用户保存功能需要后端API支持');
        bootstrap.Modal.getInstance(document.getElementById('userModal')).hide();
    }

    function deleteUser(userId) {
        if (confirm('确定要删除用户 ID: ' + userId + ' 吗？')) {
            // 简化处理，实际应该调用API删除用户
            alert('用户删除功能需要后端API支持');
        }
    }

    function showError(message) {
        const userListDiv = document.getElementById('userList');
        userListDiv.innerHTML = `<div class="alert alert-danger">${message}</div>`;
    }
</script>
</body>
</html>
